<template>
  <div class="plc-write-dialog">
    <el-form
        :model="plcAddress"
        size="small" label-width="100px" label-position="left">
      <el-form-item label="设备" width="120px">
        <el-select
            clearable
            v-model="plcAddress.DataSourceId"
            @change="OnDeviceChange"
            placeholder="请选择设备"
            style="width: 90%"
        >
          <el-option
              v-for="item in optionDevices"
              :key="item.Id"
              :label="item.DeviceName"
              :value="item.Id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址" class="plc-write-adds">
        <div class="plc-write-add" v-for="(item,w_index) in plcAddress.WriteParams" :key="w_index">
          <el-select
              v-model="item.AddressId"
              placeholder="请选择地址"
              clearable
              style="width: 225px"
          >
            <el-option
                v-for="item in optionAddress"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
            >
            </el-option>
          </el-select>
          <data-source-input
              style="max-width: 300px;width: 225px;margin-left: 6px"
              :datasource-item="item"
              :node-id="item.DataSourceId"
              :param-name="item.ParamName"
              null-message="请选择数据来源（不能为空）"
              @change="onValueChange($event,w_index)"
          />
          <div class="plc-write-btn">
            <el-button
                v-if="plcAddress.WriteParams.length>1"
                icon="Delete"
                @click.prevent="deleteWriteParam(w_index)"
                type="warning"
                size="small"
                circle
            ></el-button>
            <el-button
                v-if="w_index === plcAddress.WriteParams.length-1"
                class=""
                icon="Plus"
                @click.prevent="addWriteParam"
                type="success"
                size="small"
                circle
            ></el-button>
          </div>
        </div>
      </el-form-item>
      <!--      <el-form-item label="值">-->
      <!--      </el-form-item>-->
      <el-form-item label="描述">
        <el-input
            v-model="plcAddress.Desc"
            type="textarea"
            :rows="6"
            placeholder="请输入描述"
            style="width: 90%"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { AppParams } from '@/utils/appParams'
import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi'
import Utils from '../../../../utils/Common'
import NodeConfigMixin from '../../../../libs/NodeConfigMixin'
import DataSourceInput from '../../components/NodeInputSourceDataComponent.vue'
import { MessageWarning } from "@/utils";
import { System } from "@/api/SystemApi";
import { useFlowStore } from "@/store/modules/flow/flowStore";

export default {
  name: 'DrivePlcWriteDialog',
  mixins: [NodeConfigMixin],
  components: { DataSourceInput },
  data () {
    return {
      FlowStore: null,
      optionDevices: [],
      optionAddress: [],
      plcAddress: {
        DataSource: AppParams.DRIVER_TYPE_PLC,
        DataSourceId: null,
        Target: null,
        Address: null,
        WriteParams: [{}],
        Content: null,
        NodeId: true,
        IsAddressHub: true,
        Desc: null
      }
    }
  },
  methods: {
    deleteWriteParam (index) {
      this.plcAddress.WriteParams.splice(index, 1)
    },
    addWriteParam () {
      this.plcAddress.WriteParams.push({})
    },
    ShowNodeData () {
      const _node = Object.assign({}, this.currentClickNodeMixin)
      this.SetFormValue(_node)
      this.InitNodeData(this.plcAddress.DataSourceId)
    },
    /**
     * 设置回显的表单数据
     * @param _node
     * @constructor
     */
    SetFormValue (_node) {
      if (!Utils.IsEmpty(_node?.nodeInputParam?.NodePLC)) {
        this.OnDeviceChange(_node.nodeInputParam.NodePLC.DataSourceId);
        const from = {}
        from.DataSource = AppParams.DRIVER_TYPE_PLC
        from.DataSourceId = _node.nodeInputParam.NodePLC.DataSourceId
        from.Desc = _node.nodeInputParam.Desc
        from.IsAddressHub = true
        const WriteParams = _node.nodeInputParam.NodePLC.WriteParams || [{}]
        from.WriteParams = WriteParams
        this.plcAddress = from
      }
    },
    /**
     * 选中的值
     * @param item
     * @param itemIndex
     */
    onValueChange (item, itemIndex) {
      if (!Utils.IsEmpty(item)) {
        this.plcAddress.WriteParams[itemIndex].DataSourceId = item.nodeId
        this.plcAddress.WriteParams[itemIndex].ParamName = item.ParamName
        this.plcAddress.WriteParams[itemIndex].DataSource = item.DataSource
      }
    },
    /**
     * 选中的值
     * @param DataSourceId
     */
    OnDeviceChange (DataSourceId) {
      this.optionAddress = []
      if (!Utils.IsEmpty(DataSourceId)) {
        this.plcAddress.WriteParams = [{}];
        const FlowStore = useFlowStore();
        let _Data = DataSourceId === -99 ? FlowStore.GlobalParams : FlowStore.PlcAddress.filter(p => p.DriverId === DataSourceId)
        this.optionAddress = _Data
      }
    },
    /**
     * 初始化节点数据
     * @constructor
     */
    InitNodeData () {
      this.optionDevices = this.$store.getters.driver
      // this.OnDeviceChange(DataSourceId)
    },
    _SaveNode (NodeName) {
      const _plc = this.plcAddress
      if (Utils.IsEmpty(_plc.DataSourceId) || _plc.DataSourceId == 0) {
        return MessageWarning('请选择设备')
      }
      const params = {
        NodePLC: {
          DataSource: _plc.DataSource,
          DataSourceId: _plc.DataSourceId,
          WriteParams: _plc.WriteParams
        },
        Desc: _plc.Desc
      }
      new FlowNodeDataApi().Install(this.currentClickNodeMixin.id, params, NodeName)
    }
  },
  mounted () {
    this.FlowStore = useFlowStore()
    this.ShowNodeData()
  }
}
</script>

<style lang="less">
.plc-write-dialog {
  .plc-write-adds {

    .el-form-item__content {
      display: block !important;
    }

    .plc-write-add {
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
    }

    .plc-write-btn {
      height: 20px;
      float: left;
      margin-left: 6px;
    }
  }
}
</style>
